<template>
  <div class="my_set">

    <van-nav-bar
        left-arrow
        @click-left="$router.go(-1)"
        :title="$t('设置')"
    >
      <template #left>
        <div style="padding: 10px">
          <div class="tab_nav_icon_left">
            <van-icon style=" vertical-align: middle;" name="arrow-left" size="18"/>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <div class="content_list padding">
      <!--     问题反馈 -->
<!--      <div class="content_item" v-if="isLogin" @click="$router.push('/feedBack')">-->
<!--        <div>-->
<!--          <span class="text">{{ $t('问题或建议') }}</span>-->
<!--        </div>-->
<!--        <div class="select_right">-->
<!--          <van-icon name="arrow" color="#9D9D9D"/>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="content_item" @click="$router.push('/aboutUs')">-->
<!--        <div>-->
<!--          <span class="text">{{ $t('关于我们') }}</span>-->
<!--        </div>-->
<!--        <div class="select_right">-->
<!--          <van-icon name="arrow" color="#9D9D9D"/>-->
<!--        </div>-->
<!--      </div>-->
      <div class="content_item" v-if="isLogin" @click="onLoginOut()">
        <div>
          <span class="text">{{ $t('退出登录') }}</span>
        </div>
        <div class="select_right">
          <van-icon name="arrow" color="#9D9D9D"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {loginOut} from "@/api/my";
import router from "@/router";
import {Dialog, Toast} from 'vant'
import {useI18n} from 'vue-i18n'
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
export default {
  setup() {
    const {tm,t} = useI18n()
    const store = useStore()
    const isLogin = ref(localStorage.getItem('userId'))
    const onLoginOut = async () => {
      Dialog.confirm({
        title: t('提示'),
        message: t('确认退出账号') + '?',
      }).then(async () => {
        const res = await loginOut()
        if (res.code === 1) {
          const indexArr = ['phone', 'userId', 'loanInfo', 'token', 'userWriteInfo','userInfoVerify','orderId','homeProductList','loanInfo','productInfo']
          indexArr.forEach(item => {
            localStorage.removeItem(item)
          })
          if (window.android) {
            window.android.exitAccount(true)
          }
          router.replace('/JFLAWJLfjkw')
        }
      }).catch(() => {
      });
    }

    store.dispatch('changeLoading', false)

    return {
      isLogin,
      onLoginOut,
    }
  }
}
</script>

<style scoped lang="less">
.my_set {
  overflow: auto;
  .content_list {
    padding: 10px 0;
    .content_item {
      height: 50px;
      border-bottom: solid 1px #f2f3f5;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      div {
        height: 100%;
        display: flex;
        align-items: center;
        .image {
          height: 16px;
          width: 16px;
          margin-right: 10px;
        }

        .text {
          font-size: 14px;
          line-height: 50px;
        }
      }

      .select_right_text {
        color: #9D9D9D;
        font-size: 12px;
        margin-right: 5px;
      }

      .select_right {
        margin-right: 5px;
        color: #333333;
        font-size: 12px;
        flex: 1;
        justify-content: flex-end;
      }

      .input {
        width: 100px;
        border: none;
        height: 25px;
        font-size: 12px;
        text-align: right;
      }
    }
  }
  .login_out{
    background-color: #ffffff;
    width: 100%;
    font-size: 15px;
    padding:15px 0;
    color:#5556F1
  }
}

</style>
